<template>
  <div class="space-detail">
    <!-- 图片 -->
    <div class="space-detail-image" style="background-color: #fff">
      <img :src="detail.cardPath" class="img-fluid mx-auto d-block w-100" alt="" />
    </div>
    <!-- 返回 -->
    <div class="space-detail-back" @click="onClickLeft"></div>

    <!-- container -->
    <div class="space-detail-box pb-4">
      <!-- 状态 -->
      <div class="space-detail-status bgimg-1 mb-4">
        <div class="py-2 text-center" :class="$statusFilters.cls(detail.status)">
          {{ $statusFilters.name(detail.status)}}
        </div>
      </div>

      <div class="container">
        <!-- 标题 start -->
        <div class="row">
          <div class="col">
            <h3>{{ detail.cardName }}</h3>
          </div>
        </div>
        <!-- 标题 end -->

        <!-- 详细 start-->
        <div class="row">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col-3">专辑</div>
                <div class="col-9 text-break">{{ detail.albumName }}</div>
              </div>
              <div class="row my-2">
                <div class="col-3">编号</div>
                <div class="col-9 text-break">{{ detail.serialNumber }}</div>
              </div>
              <div class="row my-2">
                <div class="col-3">作者</div>
                <div class="col-9 text-break">{{ detail.author }}</div>
              </div>

              <div class="row my-2">
                <div class="col-3">收藏者</div>
                <div class="col-9 text-break">
                  {{ detail.collectorAddress }}
                </div>
              </div>
              <div class="row my-2">
                <div class="col-3">版权</div>
                <div class="col-9 text-break">{{ detail.copyright }}</div>
              </div>
              <div class="row my-2">
                <div class="col-3">版权金</div>
                <div class="col-9 text-break">
                  总分配版权金￥{{ detail.copyrightPrice }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->
        <!-- 标题 start -->
        <div class="row mt-4">
          <div class="col">
            <h3>交易信息</h3>
          </div>
        </div>
        <!-- 标题 end -->

        <!-- 详细 start-->
        <div class="row">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col-4">交易模式</div>
                <div class="col-8 text-break">即时成交</div>
              </div>

              <div class="row my-2">
                <div class="col-4">换手次数</div>
                <div class="col-4">{{ detail.changeNumber }}次</div>
                <div class="col-4 d-flex align-items-center justify-content-end" @click="showSwapDetail">
                  <img src="../assets/img/sp-arrow.png" style="height: 1em" class="d-block" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->
      </div>
    </div>
    <!-- container end -->
    <div class="bgimg-1 py-2 position-fixed bottom-0 end-0 w-100">
      <div class="container">
        <div class="row">
          <div class="col-6 d-flex align-items-center">
            当前价
            <span class="ps-2">
              ￥<span class="fs-2">{{ detail.sellPrice }}</span></span>
          </div>
          <div class="col-6">
            <button type="button" class="btn btn-primary float-end" @click="showOrderInfoPopup">
              我要购买
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 换手记录 start -->
    <van-popup :show="showSwapList" position="bottom" closeable round :style="{ backgroundColor: '#020a1e' }" :onClose="closeSwapList">
      <div class="container mt-3 mb-4">
        <div class="row">
          <div class="col">
            <h3>换手记录</h3>
          </div>
        </div>
        <!-- 内容 -->
        <div class="swap-list">
          <van-config-provider :theme-vars="themeVars">
            <div class="mb-4" v-for="(item,index) in records" :key="index">
              <van-cell-group :border="false">
                <van-cell :border="false" title="换手次数" :value="'第'+item.changeNumber+'次'" value-class="text-start swap-cell-title" title-class="w-25 swap-cell-value" />
                <van-cell :border="false" title="换手时间" :value="item.createTime" value-class="text-start swap-cell-title" title-class="w-25 swap-cell-value" />
                <van-cell :border="false" title="换手价格" :value="'￥'+item.tradePrice+'元'" value-class="text-start swap-cell-title" title-class="w-25 swap-cell-value" />
                <van-cell :border="false" title="购买方" :value="item.buyUserAddress" value-class="text-start swap-cell-title" title-class="w-25 swap-cell-value" />
                <van-cell :border="false" title="交易方" :value="item.sellUserAddress" value-class="text-start swap-cell-title" title-class="w-25 swap-cell-value" />
              </van-cell-group>
            </div>
          </van-config-provider>
        </div>
      </div>
    </van-popup>
    <!-- 换手记录 end -->

    <!-- 确认订单 start -->
    <van-popup :show="orderInfoPopup" position="bottom" closeable round :style="{ backgroundColor: '#020a1e' }" :onClose="closeOrderInfoPopup">
      <div class="container mt-3 mb-4">
        <div class="row">
          <div class="col">
            <h3>确认订单</h3>
          </div>
        </div>
        <!-- 内容 -->

        <div class="row mt-4">
          <div class="col-12">
            {{detail.cardName}}
          </div>
          <div class="col-12 mt-3 d-flex align-items-center">
            购买须知 <img src="../assets/img/xxxx.png" style="height:1em" class="ms-3 me-1" alt=""> 不可退换
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-4">
            订单价格
          </div>
          <div class="col-8 text-end">
            ￥{{ detail.sellPrice }} SU
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-12 d-flex align-items-center">
            <img src="../assets/img/pay.png" style="height:1.5em" class="me-3" alt=""> 余额支付 (钱包余额:￥{{personalData.suBalance}}SU)
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-12 fs-7">
            点击确认支付则视为同意《数字资产交易服务条款》
          </div>
        </div>
        <div class="row mt-4">
          <div class="col-12">
            <button type="button" class="btn btn-primary my-4 d-block mx-auto w-50" @click="onBuyCard">确认支付</button>
          </div>
        </div>

      </div>
    </van-popup>
    <!-- 确认订单 end -->

  </div>
</template>

<script lang="ts">
import { apis, fetchPersonalData, postRequest } from '@/common/ts/request'
import { Toast } from 'vant'
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const state = reactive({
      show: false,
      showSwapList: false,
      orderInfoPopup: false,
      detail: [],
      records: [],
      personalData: store.state.userData,
    })
    const themeVars = {
      cellTextColor: '#a8d0fc',
      cellBackgroundColor: '#020a1e',
      cellValueColor: '#a8d0fc',
      cellVerticalPadding: '2px',
    }
    onMounted(() => {
      init()
    })

    const init = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      })
      const { id } = route.query
      const { data } = await postRequest(apis.cardDetail, { id: id })
      console.log(data)

      state.detail = data
      Toast.clear()
    }

    const showSwapDetail = async () => {
      console.log('showSwapDetail')
      state.showSwapList = true
      const { data } = await postRequest(apis.handoverDetails, {
        serialNumber: (state.detail as any).serialNumber,
      })
      state.records = data
      console.log(data)
    }

    const closeSwapList = () => {
      console.log('closeSwapList')
      state.showSwapList = false
    }

    const showOrderInfoPopup = async () => {
      console.log('showOrderInfoPopup')
      state.orderInfoPopup = true
    }

    const closeOrderInfoPopup = () => {
      console.log('closeOrderInfoPopup')
      state.orderInfoPopup = false
    }

    const onClickLeft = () => history.back()

    // // 购买卡片
    const onBuyCard = async () => {
      const { data } = await postRequest(apis.buyCard, {
        id: (state.detail as any).id,
        userId: (state.detail as any).userId,
      })
      if (data) {
        await fetchPersonalData()
        Toast.success('购买成功')
      } else {
        Toast.fail('购买失败')
      }
    }

    return {
      ...toRefs(state),
      showSwapDetail,
      themeVars,
      closeSwapList,
      onClickLeft,
      onBuyCard,
      closeOrderInfoPopup,
      showOrderInfoPopup,
    }
  },
}
</script>

<style lang="scss" scoped>
.space-detail {
  position: relative;
  .space-detail-back {
    background: transparent url('../assets/img/sp-back.png') center no-repeat;
    height: 2em;
    width: 2em;
    background-size: 100%;
    position: absolute;
    top: 1em;
    left: 1em;
  }
  .space-detail-status {
    & > div {
      background-color: #164ed2;
      width: 5em;
      border-bottom-right-radius: 0.6em;
    }
  }

  .space-detail-box {
    background: transparent url('../assets/img/sm_sp-bg.jpg') center no-repeat;
    background-size: 100%;
    padding-bottom: 4em !important;
  }
  .swap-list {
    height: 30em;
    overflow-y: scroll;
  }
}
</style>
